<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>首页</title>
    <link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="/static/css/entypo.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/neon-core.css">
    <link rel="stylesheet" href="/static/css/neon-theme.css">
    <link rel="stylesheet" href="/static/css/neon-forms.css">
    <link rel="stylesheet" href="/static/css/custom.css">
    <link rel="shortcut icon" href="/static/favicon.ico">

    <script src="/static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body class="page-body  page-left-in" data-url="http://neon.dev">

<div class="page-container">
    <div class="sidebar-menu">
        <header class="logo-env">
            <div class="logo">
                <a href="index.html">
                    <h3 style="color:#fff;font-weight:bold;margin-top:5px">智联招聘可视化分析</h3>
                </a>
            </div>
        </header>
        <div class="sidebar-user-info">

            <div class="sui-normal">
                <a href="#" class="user-link">
                    <img style="width:95%;border-radius:50%" src="/media/{{ userInfo.avatar }}" width="120" alt="">
                    <span style="text-align:center;padding-top:209px">欢迎回来,</span>
                    <strong style="text-align:center;margin-top:5px">{{ userInfo.username }}</strong>
                </a>
            </div>
        </div>
        <ul id="main-menu" class="">
            <li class="opened active">
                <a href="/myApp/home">
                    <i class="entypo-gauge"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-user"></i>
                    <span>个人中心</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/selfInfo">
                            <span>个人信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/changePassword">
                            <span>修改密码</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-layout"></i>
                    <span>数据统计</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/tableData">
                            <span>数据总览</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/historyTableData">
                            <span>历史查阅</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-chart-pie"></i>
                    <span>可视化图表</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/salary">
                            <i class="entypo-light-down"></i>
                            <span>薪资情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/company">
                            <i class="entypo-feather"></i>
                            <span>企业情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/companyTags">
                            <i class="entypo-feather"></i>
                            <span>词云分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/educational">
                            <i class="entypo-graduation-cap"></i>
                            <span>学历分布</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/companyStatus">
                            <i class="entypo-network"></i>
                            <span>市场技术</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="main-content">

        <div class="row" style="display:flex">
            <div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">

                <ul class="list-inline links-list pull-right">
                    <li class="sep"></li>

                    <li>
                        <a href="/myApp/logOut">
                            退出登录<i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>

            </div>

        </div>

        <hr>

        <div class="row">
            <div class="col-sm-12">
                <div class="well">
                    <h1>{{ dateInfo.month }} {{ dateInfo.day }}, {{ dateInfo.year }}</h1>
                    <h3>Welcome to the site <strong>{{ userInfo.username }}</strong></h3>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-9">

                <div class="row">

                    <div class="col-sm-6">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">用户创建时间饼状图</div>

                                <div class="panel-options">
                                    <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1"
                                       class="bg"><i class="entypo-cog"></i></a>
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div id="main" style="width:100%;height:300px">

                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">最新用户信息</div>

                                <div class="panel-options">
                                    <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1"
                                       class="bg"><i class="entypo-cog"></i></a>
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                                </div>
                            </div>
                            <table class="table table-bordered table-responsive">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>用户名</th>
                                    <th>密码（MD5）</th>
                                    <th>创建时间</th>
                                    <th>用户头像</th>
                                </tr>
                                </thead>

                                <tbody>
                                {% for u in top6Users %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ u.username }}</td>
                                        <td>{{ u.password }}</td>
                                        <td class="text-center">
                                            {{ u.createTime }}
                                        </td>
                                        <td class="text-center">
                                            <img class="img-circle" src="/media/{{ u.avatar }}" width="32" alt="">
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>


                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>
                                数据获取时间柱状图
                            </h4>
                        </div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <div class="panel-body no-padding">
                        <div id="rickshaw-chart-demo-2">
                            <div id="mainTwo" style="width:100%;height:450px"></div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-sm-3">
                <div class="tile-stats tile-green">
                    <div class="icon"><i class="entypo-chart-bar"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.jobsLen }}" data-postfix="" data-duration="1500"
                         data-delay="0">{{ tagDic.jobsLen }}
                    </div>

                    <h3>数据总量统计</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="tile-stats tile-aqua">
                    <div class="icon"><i class="entypo-users"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.usersLen }}" data-postfix=""
                         data-duration="1500"
                         data-delay="0">{{ tagDic.usersLen }}
                    </div>

                    <h3>用户数量统计</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="tile-stats tile-orange">
                    <div class="icon"><i class="entypo-mail"></i></div>
                    <div class="num" style="font-size: 24px;" data-postfix="" data-duration="1500"
                         data-delay="0">{{ tagDic.educationsTop }}
                    </div>

                    <h3>行业最高学历</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="tile-stats ">
                    <div class="icon"><i class="entypo-infinity"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.salaryTop }}" data-postfix=""
                         data-duration="1500"
                         data-delay="0">{{ tagDic.salaryTop }}
                    </div>

                    <h3>行业最高薪资</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="tile-stats tile-brown">
                    <div class="icon"><i class="entypo-network"></i></div>
                    <div class="num" style="font-size:24px" data-postfix="" data-duration="1500"
                         data-delay="0">{{ tagDic.addressTop }}
                    </div>

                    <h3>优势城市</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="tile-stats tile-purple">
                    <div class="icon"><i class="entypo-briefcase"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.salaryMonthTop }}" data-postfix=""
                         data-duration="1500"
                         data-delay="0">{{ tagDic.salaryMonthTop }}
                    </div>

                    <h3>最高年底多薪</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="tile-stats tile-red">
                    <div class="icon"><i class="entypo-layout"></i></div>
                    <div class="num" style='font-size:24px' data-postfix="" data-duration="1500"
                         data-delay="0">
                        {% if not tagDic.praticeMax %}
                            正常岗位
                        {% else %}
                            实习岗位
                        {% endif %}
                    </div>

                    <h3>岗位性质</h3>
                </div>
            </div>

        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default" data-collapsed="0"><!-- to apply shadow add class "panel-shadow" -->
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">数据表格</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body no-padding">
                        <div id="table-1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                            <table class="table table-bordered datatable dataTable" id="table-1"
                                   aria-describedby="table-1_info">
                                <thead>
                                <tr role="row">
                                    <th>编号</th>
                                    <th>职位名字</th>
                                    <th>工作地点</th>
                                    <th>职位类型</th>
                                    <th>学历要求</th>
                                    <th>工作经验</th>
                                    <th>工作标签</th>
                                    <th>最高薪水</th>
                                    <th>年底多薪</th>
                                    <th>是否实习</th>
                                    <th>公司名称</th>
                                    <th>公司福利</th>
                                    <th>融资阶段</th>
                                    <th>公司人数</th>
                                    <th>跳转</th>
                                </tr>
                                </thead>
                                <tbody role="alert" aria-live="polite" aria-relevant="all">
                                {% for job in tableData %}
                                    <tr class="gradeA odd">
                                        <td class="sorting_1">
                                            {{ forloop.counter }}
                                        </td>
                                        <td class="center">
                                            <a href="https://www.zhipin.com/web/geek/job?query={{ job.title }}">
                                                {{ job.title }}
                                            </a>
                                        </td>
                                        <td class="center">
                                            {{ job.address }}
                                        </td>
                                        <td class="center ">
                                            {{ job.type }}
                                        </td>
                                        <td class="center">
                                            {{ job.educational }}
                                        </td>
                                        <td class="center">{{ job.workExperience }}</td>
                                        <td class="center">{{ job.workTag }}</td>
                                        <td class="center">
                                            {% if job.pratice %}
                                                {{ job.salary }}/天
                                            {% else %}
                                                {{ job.salary }}/月
                                            {% endif %}
                                        </td>
                                        <td class="center">
                                            {% if job.salaryMonth != '0' %}
                                                {{ job.salaryMonth }}薪
                                            {% else %}
                                                无
                                            {% endif %}
                                        </td>
                                        <td class="center">
                                            {% if job.pratice != 0 %}
                                                实习岗位
                                            {% else %}
                                                正常岗位
                                            {% endif %}
                                        </td>
                                        <td class="center">{{ job.companyTitle }}</td>
                                        <td class="center">{{ job.companyTags }}</td>
                                        <td class="center">
                                            {{ job.companyStatus }}</td>
                                        </td>
                                        <td class="center">
                                            {{ job.companyPeople }}
                                        </td>
                                        <td class="center">
                                            <a href="{{ job.detailUrl }}" class="btn btn-info"
                                               style="margin-bottom: 5px">岗位详情</a>
                                            <a href="/myApp/addHistorys/{{ job.id }}" type="button" class="btn btn-danger">添加历史</a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- Footer -->
        <footer class="main">


            Copyright &copy;  2025.智联招聘数据可视化分析.<a target="_blank"
                                                   href="https://www.zhipin.com/web/user/safe/verify-slider"></a>

        </footer>
    </div>
</div>
<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">
<link rel="stylesheet" href="/static/css/datatables.responsive.css">
<link rel="stylesheet" href="/static/css/select2-bootstrap.css">
<link rel="stylesheet" href="/static/css/select2.css">
<!-- Bottom Scripts -->
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/TableTools.min.js"></script>
<script src="/static/js/dataTables.bootstrap.js"></script>
<script src="/static/js/jquery.dataTables.columnFilter.js"></script>
<script src="/static/js/lodash.min.js"></script>
<script src="/static/js/datatables.responsive.js"></script>
<scirpt>
    <script type="text/javascript">
        var responsiveHelper;
        var breakpointDefinition = {
            tablet: 1024,
            phone: 480
        };
        var tableContainer;

        jQuery(document).ready(function ($) {
            tableContainer = $("#table-1");

            tableContainer.dataTable({
                "sPaginationType": "bootstrap",
                "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "bStateSave": true,


                // Responsive Settings
                bAutoWidth: false,
                fnPreDrawCallback: function () {
                    // Initialize the responsive datatables helper once.
                    if (!responsiveHelper) {
                        responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition);
                    }
                },
                fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    responsiveHelper.createExpandIcon(nRow);
                },
                fnDrawCallback: function (oSettings) {
                    responsiveHelper.respond();
                }
            });

            $(".dataTables_wrapper select").select2({
                minimumResultsForSearch: -1
            });
        });
    </script>
</scirpt>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '用户创建时间分布',
            subtext: '模拟数据',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] // 请替换为实际的用户创建时间分类数据
        },
        series: [
            {
                name: '用户数量',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: {{ userCreateData | safe }}.sort(function (a, b) { return a.value - b.value; }), // 假设 {{ userCreateData | safe }} 是一个包含 {name: '...', value: ...} 对象的数组
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    formatter: '{b}: {c} ({d}%)'
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };

    option && myChart.setOption(option);

</script>
<script>
    var charDom = document.getElementById('mainTwo')
    let data = {{ jobsPBarData | safe}}
    console.log('数据获取时间数据:', data)
    var myChart = echarts.init(charDom)
    let xRes = [];
    let yRes = [];
    let yResTwo = []
    
    // 检查数据是否存在且有效
    if (data && data.length > 0) {
        // 只取前5条数据
        const displayCount = Math.min(5, data.length);
        for (var i = 0; i < displayCount; i++) {
            if (data[i] && data[i].length >= 3) {
                xRes.push(data[i][0])
                yRes.push(data[i][1])
                yResTwo.push(data[i][2])
            }
        }
    }

    let options = {
        title: {
            text: '数据获取时间统计',
            subtext: '爬取量与平均值',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                let result = params[0].name + '<br/>';
                params.forEach(param => {
                    let value = param.value;
                    let marker = param.marker;
                    let seriesName = param.seriesName;
                    if (seriesName === '爬取数据量') {
                        result += marker + seriesName + ': ' + value + ' 个<br/>';
                    } else {
                        result += marker + seriesName + ': ' + (value * 100).toFixed(1) + '%<br/>';
                    }
                });
                return result;
            }
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['爬取数据量', '数据平均值'],
            top: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'value',
                name: '数量/百分比',
                nameLocation: 'middle',
                nameGap: 40,
                axisLabel: {
                    formatter: function (value, index) {
                        if (index === 0) return '';
                        return value >= 1 ? value + ' 个' : (value * 100) + ' %';
                    },
                    margin: 15,
                    fontSize: 12
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#ccc'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2
                    }
                },
                axisTick: {
                    show: true,
                    length: 5
                }
            },
            {
                type: 'value',
                name: '数据平均值',
                nameLocation: 'middle',
                nameGap: 40,
                min: 0,
                max: 1,
                axisLabel: {
                    formatter: '{value} %',
                    margin: 15,
                    fontSize: 12
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2
                    }
                },
                axisTick: {
                    show: true,
                    length: 5
                }
            }
        ],
        yAxis: {
            type: 'category',
            data: xRes,
            boundaryGap: true,
            axisLabel: {
                interval: 0,
                margin: 15,
                fontSize: 12,
                formatter: function(value) {
                    // 格式化日期显示
                    let date = new Date(value);
                    return date.getMonth() + 1 + '/' + date.getDate();
                }
            },
            axisTick: {
                alignWithLabel: true,
                length: 5
            },
            axisLine: {
                lineStyle: {
                    width: 2
                }
            }
        },
        series: [
            {
                data: yRes,
                type: 'bar',
                name: '爬取数据量',
                barWidth: '40%',
                itemStyle: {
                    borderRadius: [0, 5, 5, 0],
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {offset: 0, color: '#11d56d'},
                        {offset: 1, color: '#83bff6'}
                    ]),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
                animationDuration: 1500,
                animationEasing: 'cubicOut'
            },
            {
                data: yResTwo,
                type: 'bar',
                xAxisIndex: 1,
                name: '数据平均值',
                barWidth: '40%',
                itemStyle: {
                    borderRadius: [0, 5, 5, 0],
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                         {offset: 0, color: '#cd7cf3'},
                         {offset: 1, color: '#de5df2'}
                    ]),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
                animationDuration: 1500,
                animationEasing: 'cubicOut'
            }
        ]
    }

    // 设置初始配置
    options && myChart.setOption(options)

    // 数据更新逻辑
    if (data && data.length > 5) {
        let count = 5;
        setInterval(() => {
            if (count >= data.length) count = 0;
            
            // 安全地获取数据
            if (data[count] && data[count].length >= 3) {
                xRes.shift();
                xRes.push(data[count][0]);
                yRes.shift();
                yRes.push(data[count][1]);
                yResTwo.shift();
                yResTwo.push(data[count][2]);
                
                count++;
                
                // 更新图表
                myChart.setOption({
                    yAxis: {
                        data: xRes
                    },
                    series: [
                        {
                            data: yRes
                        },
                        {
                            data: yResTwo
                        }
                    ]
                });
            } else {
                count++;
            }
        }, 2000);
    }

    // 添加窗口大小改变时的自适应
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>
</body>
</html>